<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/My97DatePicker/skin/WdatePicker.css">
<script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/js/pintuer.js"></script>

<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/static/My97DatePicker/WdatePicker.js"></script>




</head>
<body>

  <div class="panel admin-panel" id="menu">
    <div class="panel-head"><strong class="icon-reorder"> 今年未交费人员列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
    <form onsubmit="return AllShouldPush();" action="${pageContext.request.contextPath}/sys/pay.do?method=PayMoneyforPerson&pageNum=1&tgId=${tgId}" method="post">
    <table class="table table-hover text-center" id="pay">
      <tr>
      	<th>选中</th>
        <th>参合证号</th>
        <th>家庭编号</th>
        <th>身份证号</th>
        <th>参合人姓名</th>
        <th>需缴费金额</th>
      </tr>
      	<c:forEach items="${requestScope.familys}" var="payList">
        <tr>
          <td>
          <input name ="ids" id="titleCheck" type="checkbox" value="${payList.idcardNumber}"/>
          </td>
          <td>
          ${payList.farmingcardCode}
          </td>
           <td>
          ${payList.familyCode}
          </td>
           <td>
          ${payList.idcardNumber}
          </td>
           <td>
          ${payList.name}
          </td>
           <td>
          	${money}元<input id="price"name ="price" type="hidden" value="${money }"/>
          </td>
       </tr>
       </c:forEach>
      <tr>
        <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall"/>
          全选 </td>
        <td colspan="6" style="text-align:left;padding-left:20px;">
         <span style="font-size: 22px;color: #d20125;"class="current" id="sumMoney"></span>
        <input type="submit" class="button border-blue icon-edit" value="缴费">
        <!-- <a href="javascript:void(0)" onclick="AllShouldPush()" style="padding:5px 15px; margin:0 10px;" class="button border-blue icon-edit"> 缴费</a> --> 
        </td>
      </tr>

    </table>
    </form>
  </div>

<script src="${pageContext.request.contextPath}/static/js/vue.min.js"></script>

<script type="text/javascript">

//全选
$("#checkall").click(function(){ 
  var mySpan=document.getElementById("sumMoney");
  var price=document.getElementById("price").value;
  var sum=0;
  var len='';
  $("input[name='ids']").each(function(){
	  var str = "";
	  if (this.checked) {
		  this.checked = false;
	  }
	  else {
		  this.checked = true;
		  len = $('input[name="ids"]:checked').length;
	  }
  });
  sum=parseInt(len*price);
  mySpan.innerHTML = "总金额:" + sum;
})
//表单提交检验
 function AllShouldPush(){
    //选出勾选的记录
        var str = new Array();
        $('input[name="ids"]:checked').each(function(i,d){
            str.push(d.value);
        }); 
      console.log(str);
      if(str.length <= 0){
          alert("请勾选需要操作的记录");
          return false;
      }
      return true;
}
$("input[name='ids']").click(function(){
	
	var mySpan=document.getElementById("sumMoney");
	var price=document.getElementById("price").value;
	var sum=0;
	var len='';
	var len = $('input[name="ids"]:checked').length;
	console.log(len)
	sum=parseInt(len*price);
	mySpan.innerHTML = "总金额:" + sum+ "元";
	
})





</script>
<!-- vue 遍历菜单 -->
<!-- 	<script type="text/javascript">
   
   
    	var _vm = new Vue({
    		el : "#menu",
    		data : {
    			baseUrl : '${pageContext.request.contextPath}',
    			menus : ${resultMenus},
    			pay:"参合缴费"
    			
    			
    		}
    	});
        
    </script> -->

</body>
</html>



















